import { Form, Modal, Input, Radio } from 'antd';
import React from 'react';
import { FormComponentProps } from 'antd/es/form';

interface CollectionCreateFormProps extends FormComponentProps {
  visible?: boolean;
  onCancel?: (e: React.MouseEvent<HTMLElement>) => void;
  onCreate?: (e: React.MouseEvent<HTMLElement>) => void;
  loading?: boolean;
}

const CollectionCreateForm = Form.create<CollectionCreateFormProps>({ name: 'form_in_modal' })(
  // eslint-disable-next-line react/prefer-stateless-function
  class extends React.Component<CollectionCreateFormProps> {
    render() {
      const { visible, onCancel, onCreate, form } = this.props;
      const { getFieldDecorator } = form;
      return (
        <Modal
          visible={visible}
          title="添加属性分类"
          okText="确定"
          cancelText="取消"
          onCancel={onCancel}
          onOk={onCreate}
          confirmLoading={this.props.loading}
        >
          <Form>
            <Form.Item labelCol={{ span: 5 }} wrapperCol={{ span: 19 }} label="属性分类">
              {getFieldDecorator('name', {
                rules: [{ required: true, message: '请输入分类名称' }],
              })(<Input />)}
            </Form.Item>
          </Form>
        </Modal>
      );
    }
  },
);

export default CollectionCreateForm;
